<template>
    <div class="warpper-box">
      <form-create 
        v-model="params.fApi" 
        :rule="params.rule" 
        :option="params.option" 
        @btn-search-click="$refs.table.refresh(true)"
        @btn-reset-click="reset"/>
        <a-button type='primary' icon="plus" @click="$refs.createPark.add(true)">新增</a-button>
      <s-table
        row-key="id"
        showPagination="auto"
          ref="table" showQuickJumper
      size="default"
        :columns="columns"
        :data="loadData">
        <span slot="logo" slot-scope="text, record">
          <template v-if="record.logo">
            <viewer :images="[record.logo]">
              <img :src="record.logo" style="width:50px;height:50px;cursor: pointer;">
            </viewer>
          </template>
        </span>
        <span slot="name" slot-scope="text, record">
          <a-popover title="服务商名称" trigger="hover">
            <template #content>
            <p style="margin: 0;">{{text}}</p>
            </template>
            <a-button style="padding: 0;color:#000" type="link">{{record.name | filterMore(7)}}</a-button>
          </a-popover>
        </span>
        <span slot="nickName" slot-scope="text, record">
          <a-popover title="服务商简称" trigger="hover">
            <template #content>
            <p style="margin: 0;">{{text}}</p>
            </template>
            <a-button style="padding: 0;color:#000" type="link">{{record.nickName | filterMore(7)}}</a-button>
          </a-popover>
        </span>
        <span slot="creditCode" slot-scope="text, record">
          <a-popover title="统一信用代码" trigger="hover">
            <template #content>
            <p style="margin: 0;">{{text}}</p>
            </template>
            <a-button style="padding: 0;color:#000" type="link">{{record.creditCode | filterMore(7)}}</a-button>
          </a-popover>
        </span>
        <span slot="address" slot-scope="text, record">
          <a-popover title="注册地址" trigger="hover">
            <template #content>
            <p style="margin: 0;">{{text}}</p>
            </template>
            <a-button style="padding: 0;color:#000" type="link">{{record.address | filterMore(7)}}</a-button>
          </a-popover>
        </span>
        <span slot="email" slot-scope="text, record">
          <a-popover title="电子邮箱" trigger="hover">
            <template #content>
            <p style="margin: 0;">{{text}}</p>
            </template>
            <a-button style="padding: 0;color:#000" type="link">{{record.email | filterMore(7)}}</a-button>
          </a-popover>
        </span>
        <span slot="status" slot-scope="text, record">
          <a-switch checked-children="启用" :disabled="true" un-checked-children="禁用" 
          :checked="record.status === 1 ? true : false"
          default-checked />
        </span>
        <span slot="action" slot-scope="text, record">
          <template v-if="record.status === 1">
            <a-popconfirm
                  title="确认停用？"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="handelUserStatusChange(record)" >
                    <a>停用</a>
              </a-popconfirm>
            <a-divider type="vertical" />
          </template>
          <template v-if="record.status === 2">
            <a-popconfirm
                  title="确认启用？"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="handelUserStatusChange(record)" >
                    <a>启用</a>
              </a-popconfirm>
            <a-divider type="vertical" />
          </template>
          <a @click="$refs.createPark.add(record)">编辑</a>
        </span>
      </s-table>
      <add-park ref="createPark" @on-ok="parkLoad"/>
    </div>
</template>

<script>
import { STable } from '@/components'
import { mapGetters,mapActions } from 'vuex'
import store from '@/store'
import moment from 'moment'
import {getParkPage,disOrEnablePark} from "@/api/human/park"
import {PARAMS_PARK,COLUMNS_PARK} from "./form"
import {OPTION_BLOCK,OPTION_INLINE} from "../base_form"
import AddPark from "./add_park"
export default {
  name: 'parkList',
  components: {
    STable,
    AddPark
  },
  data () {
    return {
      params:{
        fApi:{},
        rule:PARAMS_PARK,
        option:OPTION_INLINE
      },
      columns:COLUMNS_PARK,
      loadData:parameter => {
        let formdata = this.params.fApi.formData();
        return getParkPage(Object.assign(parameter,formdata)).then(res => {
          return {
            pageNo:res.data.number,
            pageSize:res.data.size,
            totalCount: res.data.total,
            totalPage: Math.ceil(res.data.total / 10),
            data: res.data.content
          }
        })
      }
    }
  },
  computed: {
      ...mapGetters(['orgData','orgFields','orgRoleData']),
  },
  filters: {
    filterMore (value,num) {
      if (!value) return ''
      if (value.length > num) {
          return value.slice(0,num) + '...'
      }
      return value
    }
  },
  mounted(){
   window.addEventListener('keyup',this.keyDown);
 },
 destroyed(){
   window.removeEventListener('keyup',this.keyDown);
 },
 beforeCreate() {
      this.events_form = this.$form.createForm(this,{name:'events_form'})
  },
  created () {
    this.getAllDepartmentTree(this.parentOrgId);
  },
  methods: {
    ...mapActions({
      getAllDepartmentTree:'department/getAllDepartmentTree'
    }),
     keyDown(e){
      if(e.keyCode == 13){
        this.$refs.table.refresh(true);
      }
    },
    async handelUserStatusChange(el){
     let params = {
        id:el.id,
        status:el.status === 1?2:1 
      }
      const {code} = await disOrEnablePark(params);
        if(code === '1'){
          this.$message.success('操作成功');
          this.$refs.table.refresh(false);
      }
    },
    parkLoad(state){
       this.$refs.table.refresh(state);
    },
    reset () {
      this.events_form.resetFields();
      this.$refs.table.refresh(true);
    }
  }
}
</script>
